<template>
  <div class="container">
    <div class="container_head">
      <el-row :gutter="20">
        <el-col :span="6">
          <h3 class="myH3">班级</h3>
        </el-col>
        <!--        <el-col :span="18">-->
        <!--          <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search"-->
        <!--                    @keyup.enter.native="search" class="sousuo">-->
        <!--            <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>-->
        <!--          </el-input>-->
        <!--        </el-col>-->
      </el-row>
    </div>
    <div class="container_body" v-for="(classes,index) in classesList" :key="index">
      <el-row>
        <el-col :span="8">
          <div>
            <img src="img/login2.jpg" style="height: 170px;">
          </div>
        </el-col>
        <el-col :span="8">
          <div style="margin-top: 50px">
            <h3>{{ classes.className }}</h3>
            <h4 style="color: #606266">学生：{{ classes.totalStudent }}人</h4>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="margin-top: 50px">
            <el-button type="primary" icon="el-icon-s-custom" circle @click="showStuList(classes.classIdid)">学生列表
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 详情弹框 -->
    <el-dialog :visible="detailDialogVisible" @close="detailDialogVisible = false">
      <el-table
          :data="stuList"
          border
          style="">
        <el-table-column
            prop="userName"
            label="姓名"
            height="10"
            width="200">
        </el-table-column>
        <el-table-column
            label="性别"
            height="10"
            width="200">
          <template slot-scope="scope">
            {{ scope.row.userSex == 0 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column
            prop="jobNumber"
            label="学号"
            height="10"
            width="200">
        </el-table-column>
        <el-table-column
            label="出生日期"
            height="10">
          <template slot-scope="scope">
            {{ dateFormat(scope.row.userBir) }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CourseList",
  data() {
    return {
      courseName: '',
      //班级数组
      classesList: [],
      classIdid: -1,
      user: JSON.parse(window.localStorage.getItem('user')),
      //学生详情列表
      detailDialogVisible: false,
      stuList: []
    }
  },
  methods: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day;
    },
    showStuList(classIdid) {
      const _this = this;
      axios.get("http://localhost:8080/classStuDetail/findStuByClassIdId?classIdId=" + classIdid).then(function (res) {
        _this.stuList = res.data.data
        _this.detailDialogVisible = true;
        console.log(_this.stuList);
      })
    }
  },
  created() {
    const _this = this;
    //获取教师的所有班级
    axios.get("http://localhost:8080/classStuDetail/findClassByTeacherId?teacherId=" + _this.user.userId).then(function (res) {
      _this.classesList = res.data.data;
      console.log("教师所有班级");
      console.log(_this.classesList);
    })
  }
}
</script>

<style scoped>
.container_head {

}

.container_body {
  /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
  /*text-align: center;*/
  height: 170px;
  width: 72%;
  margin-left: 180px;
  background-color: white;
  padding: 20px;
  shadow: hover;
  margin-bottom: 20px;
  color: black;
}

.container_body:hover {
  box-shadow: 0 2px 30px rgb(69, 176, 255);
}

.sousuo {
  width: 250px;
  margin-left: 500px;
  margin-top: 12px
}
</style>
